<script setup lang="ts">
import {onMounted, ref} from 'vue';
  import axios from "axios";
  const activeKey = ref('');

  interface DataItem {
    title: string;
  }
  let data: DataItem[] = [
    {
      title: 'Ant Design Title 1',
    },
    {
      title: 'Ant Design Title 2',
    },
    {
      title: 'Ant Design Title 3',
    },
    {
      title: 'Ant Design Title 4',
    },
  ];
  // 获取文章列表
  onMounted(() => {
    axios.get('http://localhost:8081/article/list')
        .then((resp) => {
          if (resp && resp.data) {
            data = resp.data;
            console.log(data);
          }
        }).catch((error) => {
      console.log(error);
    });
  });
</script>

<template>
  <a-tabs v-model:activeKey="activeKey" centered>
    <a-tab-pane key="1" tab="文章">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta>
              <template #description>
                <p>{{ item.content }}</p>
              </template>
              <template #title>
                <a href="https://www.antdv.com/">{{ item.title }}</a>
              </template>
              <template #avatar>
                <a-avatar src="https://gw.alipayobjects.com/zos/bmw-prod/598d14af-4f1c-497d-b579-5ac42cd4dd1f/k7bjua9c_w132_h130.png" />
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </a-tab-pane>
    <a-tab-pane key="2" tab="图片">图片</a-tab-pane>
    <a-tab-pane key="3" tab="视频">视频</a-tab-pane>
  </a-tabs>
</template>

<style scoped>
</style>
